<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		   * append()          功能：在匹配元素集合中所有的元素的内部末尾插入内容
		   * prepend()         功能：在匹配元素集合中所有的元素的内部开头插入内容
			 
			 after()           功能：在匹配元素集合中所有的元素的后面插入内容
			 before()          功能：在匹配元素集合中所有的元素的前面插入内容
			 
			 remove()          功能：移出匹配元素集合中所有的元素和子元素【盒子模型都删掉】
			 empty()           功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
			 
			 replaceWith()
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			button {
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer; //鼠标移动上：手指显示
			}

			#target {
				border: 1px solid #aaaaff;
				padding: 10px;
				margin-top: 10px;
			}

			body {
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<!-- html:7个按钮  div包含p 名字：目标元素的初始段落  id="target"
		                  div包含p 名字：插入元素的初始段落   id="newElement"   隐藏
			 css:  按钮：外边距5px 内边距：10px 15px  鼠标移动上：手指显示
			       body:外边距20px
				   #target：1像素实线边框、内边距：10px、上外边距：10px
			 引入jq
		 -->
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!-- 目标显示区域 -->
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<!-- 用于插入跟替换的区域 -->
		<div id="newElement" style="display: none;">
			<p>插入元素的初始段落</p>
		</div>
		<script>
			/* 1.点击  内部末尾插入元素  按钮：p文本后面追加新元素中包含内容操作 */
			$("#appendBtn").click(function() {
				//效果： 点击按钮  追加"新元素--自带内容"
				//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe = $("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：隐藏----改成显示
				cpe.css("display", "block");
				//1.3 将复制出来的新元素，追加给当前元素上
				$("#target").append(cpe);
			});
			/* 2.点击  内部开头插入元素  按钮：p文本后面追加新元素中包含内容操作 */
			$("#prependBtn").click(function() {
				var pre = $("#newElement").clone();
				pre.css("display", "block");
				$("#target").prepend(pre);
			});
			/* 3.点击  外部后面插入元素  按钮：p文本后面追加新元素中包含内容操作 */
			$("#afterBtn").click(function() {
				var aft = $("#newElement").clone();
				aft.css("display", "block");
				$("#target").after(aft);
			});
			/* 4.点击  外部前面插入元素  按钮 生成圆；保留背景色，文本不需要 背景图：300*300*/
			$("#beforeBtn").click(function() {
				var bef = $("#newElement").clone();
				bef.css({
					"display": "block",
					"background-image": "url(../img/2.gif)",
					"height": "300px",
					"width": "300px",
					"border": "5px solid #eee",
					"background-size": "100% 100%",
					"border-radius": "50%",
					"color": "transparent"
				});
				$("#target").before(bef);
			});
			/* 5.点击 删除元素   按钮  页面上所有元素包括子元素全部删除 【盒子模型】 */
			$("#removeBtn").click(function() {
				$("#target").remove();
			});
			/* 6.点击 清空内容  按钮   页面上所有元素中内容全部删除 【盒子模型不删】*/
			$("#emptyBtn").click(function() {
				$("#target").empty();
			});
			/* 7.点击 替换元素  按钮  页面上目标元素替换为新元素 */
			$("#replaceBtn").click(function() {
				//克隆  新元素  #newElement【父子级】
				var rep = $("#newElement").clone().css("display", "block");
				//替换  新元素 替换 目标元素
				$("#target").replaceWith(rep);
			});
		</script>
	</body>
</html>